<template>
  <div>
    <div>
      <div>
        <div style="display: flex;justify-content: start;margin-bottom: 10px">
          <el-button
              @click="addEventBtn"
              round
              style="color: #545c64;"
              size="small"
          >
            添加事件
            <el-icon style="margin: 0 10px">
              <Plus/>
            </el-icon>
          </el-button>
        </div>
        <el-table
            :data="EventList"
            :height="400"
            style="width: 100%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
        >
          <el-table-column
              prop="EventName"
              label="事件名称"
          >
            <template #default="scope">
              {{ scope.row.Id }}# {{ scope.row.EventName }}
            </template>
          </el-table-column>
          <el-table-column
              prop="TriggerId"
              label="触发地址"
          >
            <template #default="scope">
              <div v-html="TriggerName(scope.row)">
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="TriggerMode"
              label="触发模式"
          >
          </el-table-column>
          <el-table-column
              prop="TriggerValue"
              label="触发值"
          >
          </el-table-column>
          <el-table-column
              prop="TriggerFlow"
              label="触发流程"
          >
            <template #default="scope">
              <div v-html="ShowFlowName(scope.row) "></div>
            </template>
          </el-table-column>
          <el-table-column
              prop="Desc"
              label="描述"
          >
          </el-table-column>
          <el-table-column
              prop="operation"
              label="操作"
              width="135"
          >
            <template #default="scope">
              <el-button @click="deleteEvent(scope.row,scope.$index)" type="text" size="small" style="color: red">
                删除
              </el-button>
              <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--    </el-dialog>-->
    <add-event-dialog :show="showAddEventDialog" :event="currentSelect" @close="onClose"></add-event-dialog>
  </div>
</template>
<script>
import AddEventDialog from './AddEventDialog.vue'
import EventApi from '@/api/flow/EventApi'
import { MessageSuccess } from "@/utils";
import { useFlowStore } from "@/store/modules/flow/flowStore";
import { AppParams } from "@/utils/appParams";

export default {
  name: 'EventDialog',
  components: { AddEventDialog },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  computed: {},
  data () {
    return {
      showAddEventDialog: false,
      currentSelect: null,
      EventList: [],
      allFlow: [],
      PlcAddress: []
    }
  },
  methods: {
    ShowFlowName (row) {
      const f = this.allFlow.find(s => s.id === row.TriggerFlow)
      return f?.Title
    },
    TriggerName (row) {
      let name = null
      if (row?.TriggerDevice === 'S71200') {
        const address = this.PlcAddress
        for (const off of address) {
          if (off.Id === row.TriggerId) {
            name = off.Name
            break
          }
        }
      }
      if (row?.TriggerDevice === 'SOCKET_CLIENT') {
        let sd = AppParams.COMMON.MATCHING_MODE.filter(mm => mm.value === row.TriggerId)[0]
        name = sd?.tip
      }

      return name
    },
    onClose () {
      this.showAddEventDialog = false
      this.showEventList()
    },
    addEventBtn () {
      this.currentSelect = null
      this.showAddEventDialog = true
    },
    edit (row) {
      this.currentSelect = row
      this.showAddEventDialog = true
    },
    /**
     * 删除事件
     * @param row
     * @param index
     */
    deleteEvent (row, index) {
      this.$confirm(`是否删除事件${row.EventName}？`, `确认删除${row.EventName}`, {
        distinguishCancelAndClose: true,
        roundButton: true,
        confirmButtonClass: 'delete-plc--btn',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(() => {
        new EventApi().DeleteEvent(row.Id, (res) => {
          this.EventList.splice(index, 1)
          MessageSuccess('删除成功')
        })
      })
    },
    onConfirm (plc) {
      this.showEventList()
    },
    /**
     * 显示设备下的事件列表信息
     */
    showEventList () {
      new EventApi().SearchEvents((list) => {
        this.EventList = list
      })
    },
    /**
     * 关闭窗口
     */
    handleCloseEventDialog () {
      this.EventInfo = {}
      this.$emit('close')
    }
  },
  mounted () {
    const FlowStore = useFlowStore()
    this.allFlow = FlowStore.AllFlow
    this.PlcAddress = FlowStore.PlcAddress;
    this.showEventList()
  }
}
</script>

<style lang="less">
.app-event-dialog {

}

.delete-plc--btn {
}
</style>
